<template>
  <div :class="$style.wrap">
    <!-- <Button type="primary" :disabled="disabled" @click="visible=true">{{ text }}</Button> -->
    <Button type="primary" @click="visibleHandle">{{ text }}</Button>
    <el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" @close="resetForm" @opened="initData">
      <FormContainer :column="2">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <!-- <el-form-item prop="deptNo" label="组织">
            <el-select v-model="formData.deptNo" placeholder="请选择组织" filterable clearable>
              <el-option v-for="d in deptList" :key="d.deptNo" :value="d.deptNo" :label="d.deptName"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="skillNo" label="技能队列">
            <el-select v-model="formData.skillNo" placeholder="请选择使用技能队列" clearable filterable>
              <el-option v-for="(g,i) in skillList" :key="i" :value="g.skillNo" :label="g.skillName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="name" label="坐席姓名">
            <el-input v-model.trim="formData.name" placeholder="请输入坐席姓名" clearable></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="转接号码">
            <el-input v-model.trim="formData.phone" placeholder="请输入转接号码" clearable></el-input>
          </el-form-item>
          <el-form-item prop="beginTime" :span="12" label="转接开始时间">
            <el-date-picker v-model="formData.beginTime" type="datetime" placeholder="请选择转接开始时间" clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="endTime" :span="12" label="转接结束时间">
            <el-date-picker v-model="formData.endTime" type="datetime" placeholder="请选择转接结束时间" clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item :span="24" prop="remarks" label="备注">
            <el-input v-model="formData.remarks" type="textarea" :autosize="{minRows:4}" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item :span="24">
            <div class="button-container" style="padding-top:0;">
              <Button type="primary" @click="visible=false">取消</Button>
              <Button type="primary" @click="submitHandle">确定</Button>
            </div>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
// import { validateTel } from '@/utils/validate'
import { deepCopy, parseTime } from '@/utils'
import { postCallTransfer, putCallTransfer } from '@/api/callTransfer'
import { mapGetters } from 'vuex'
export default {
  name: 'AddEdit',
  components: {
    FormContainer
  },
  props: {
    title: {
      type: String,
      default: '新增'
    },
    text: {
      type: String,
      default: '新增'
    },
    data: {
      type: Array,
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    skillList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const validatorTel = (r, v, c) => {
      if (/^\d+$/.test(v)) {
        c()
      } else {
        c(new Error('输入的号码格式不正确！'))
      }
    }
    const validatorEndTime = (r, v, c) => {
      if (!this.formData.beginTime) {
        c(new Error('请选择开始时间'))
      } else if (v.getTime() < this.formData.beginTime.getTime()) {
        c(new Error('结束时间不能小于开始时间'))
      } else {
        c()
      }
    }
    return {
      visible: false,
      formData: {
        beginTime: '', //	开始时间
        // createBy: '',	// 新增操作人
        // deptNo: '',	// 所属组织编号
        skillNo: '',	// 所属技能编号
        endTime: '',	// 结束时间
        // lastUpdateBy: '',	// 更新操作人
        name: '', // 坐席姓名
        phone: '', // 转接号码
        remarks: '' // 备注
      },
      formRules: {
        beginTime: [
          { required: true, type: 'date', message: '请选择转接开始时间', trigger: 'change' }
        ], //	开始时间
        // createBy: '',	// 新增操作人
        skillNo: [
          { required: true, message: '请选择技能队列', trigger: 'change' }
        ],	// 所属组织编号
        endTime: [
          { required: true, type: 'date', message: '请选择转接结束时间', trigger: 'change' },
          { required: true, validator: validatorEndTime, trigger: 'change' }
        ],	// 结束时间
        // lastUpdateBy: '',	// 更新操作人
        name: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ], // 坐席姓名
        phone: [
          { required: true, message: '请输入转接号码', trigger: 'change' },
          { required: true, validator: validatorTel, trigger: 'change' }
        ], // 转接号码
        remarks: [
          // { required: true, message: '请输入备注', trigger: 'change' }
        ]// 备注
      }
    }
  },
  computed: {
    ...mapGetters(['userCache']),
    // 是否是编辑
    disabled() {
      return this.data.length !== 1 && this.isEdit
    }
  },
  created() {
  },
  methods: {
    // 判断能否编辑
    visibleHandle() {
      if (this.disabled) {
        this.$message.error('请选择一条要修改的数据！')
        return
      }
      this.visible = true
    },
    // 提交数据
    submitHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        data.beginTime = parseTime(data.beginTime)
        data.endTime = parseTime(data.endTime)
        if (!this.isEdit) {
          // data.createBy = this.userCache.accountNo
          // data.lastUpdateBy = this.userCache.accountNo
          return postCallTransfer(data).then(res => {
            this.$message.success('新增成功！')
            this.$emit('refresh')
            this.visible = false
          })
        } else {
          data.id = this.data[0].id
          //   data.lastUpdateBy = this.userCache.accountNo
          return putCallTransfer(data).then(res => {
            this.$message.success('修改成功！')
            this.$emit('refresh')
            this.visible = false
          })
        }
      })
    },
    initData() {
      if (this.isEdit) {
        const data = this.data[0]
        for (const key of Object.keys(this.formData)) {
          let v = data[key]
          if (key === 'beginTime' || key === 'endTime') {
            v = new Date(data[key])
          }
          this.$set(this.formData, key, v || '')
        }
      }
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
      // this.initData()
    }
  }
}
</script>
<style lang='scss' module>
.wrap{

}
</style>
